<template>
  <div class="chat-wrapper">
    <div class="chat-header">
      <span class="current-play">
        <span v-show="songInfo.name">正在播放:</span>
        <span v-show="songInfo.name"> {{ songInfo.name }} - {{ songInfo.artist }} </span>
        <span v-show="songInfo.name">点歌人:</span>
        <span v-show="songInfo.name">{{ songInfo.username }}</span>
      </span>
      <span class="online-span" @click.stop="handleClickOnline">
        <Icon icon-name="iconicon-yxj-user" className="icon-class" />
        {{ online.length }}在线</span
      >
    </div>
    <div class="chat-main" ref="chat">
      <ul>
        <li v-for="(item, idx) in chatList" :key="idx" class="chat-item" :class="isRight(item)">
          <div class="avatar">
            <el-avatar size="large" :src="item.user.avatar"></el-avatar>
          </div>
          <div class="content">
            <div class="username">
              {{ item.user.username }}
            </div>
            <div class="msg">
              {{ item.msg }}
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="chat-input">
      <el-input @keyup.enter="sendMsg" :autofocus="true" resize="none" type="textarea" :rows="3" placeholder="请输入内容" v-model="textarea"> </el-input>
    </div>
    <div class="chat-footer">
      <div class="playingLyric">
        {{ playingLyric }}
      </div>
      <div class="enter">
        <el-button type="primary" @click="sendMsg">发送(Enter)</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textarea: '',
      send: false
    }
  },
  computed: {
    playingLyric() {
      return this.$store.getters.playingLyric
    },
    online() {
      return this.$store.getters.online
    },
    chatList() {
      return this.$store.getters.chatList
    },
    userInfo() {
      return this.$store.getters.userInfo
    },
    songInfo() {
      return this.$store.getters.songInfo
    }
  },
  watch: {
    chatList: {
      handler() {
        this.up()
      },
      deep: true
    }
  },
  methods: {
    handleClickOnline() {
      this.$emit('handleClickOnline', '用户列表')
    },
    up() {
      this.$nextTick(() => {
        console.log('chat')
        let doms = document.getElementsByClassName('chat-item')
        let lastHeight = doms[doms.length - 1].offsetHeight + 15
        const scrollHeight = this.$refs.chat ? this.$refs.chat.scrollHeight : 0
        if (this.send) {
          this.send = false
          this.$refs.chat.scrollTop = scrollHeight
        }
        if (scrollHeight - this.$refs.chat.scrollTop - lastHeight == this.$refs.chat.clientHeight) {
          this.$refs.chat.scrollTop = scrollHeight
        }
        if (!Number.isInteger(scrollHeight - this.$refs.chat.scrollTop - lastHeight)) {
          this.$refs.chat.scrollTop = scrollHeight
        }
        console.log(scrollHeight - this.$refs.chat.scrollTop - lastHeight, this.$refs.chat.clientHeight, lastHeight)
      })
    },
    async sendMsg() {
      if (this.textarea) {
        let res = await this.$store.dispatch('sendMsg', { msg: this.textarea })
        if (!res) {
          this.$message.warning('登录后才能发消息哦~')
          return
        }
        this.textarea = ''
        this.send = true
      }
    },
    isRight(item) {
      if (this.userInfo.id == item.userId) {
        return 'right'
      } else {
        return ''
      }
    }
  },
  async mounted() {
    await this.$store.dispatch('_postChatList')
    this.$nextTick(() => {
      const scrollHeight = this.$refs.chat ? this.$refs.chat.scrollHeight : 0
      this.$refs.chat.scrollTop = scrollHeight
    })
  }
}
</script>

<style lang="scss">
@import '@/style/mixin.scss';
.chat-wrapper {
  height: 100%;
  .chat-header {
    height: 40px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    .current-play {
      padding-left: 15px;
      cursor: auto;
      animation: scroll 10s infinite ease;
      span {
        cursor: auto;
        font-weight: 500;
        font-family: Arial;
        font-size: 12px;
        color: #fff;
        // background: linear-gradient(to right, #673ab7, #03a9f4);
        // background-clip: text;
        // color: transparent;
      }
    }
    svg {
      vertical-align: -0.12em;
      color: #97ff76;
    }
    span {
      line-height: 40px;
      color: #97ff76;
      padding-right: 10px;
      cursor: pointer;
      font-size: 12px;
    }
    span.online-span {
      min-width: 46px;
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap;
      max-width: 60px;
    }
  }
  .chat-main {
    height: calc(100% - 160px);
    padding: 20px;
    @include scrollBar;
    .chat-item {
      display: flex;
      margin-bottom: 15px;
      .content {
        flex: 1;
        .username {
          padding: 4px 10px 10px 10px;
        }
      }
    }
    .msg {
      background-color: #e5e5e5;
      padding: 8px 16px;
      border-radius: 10px;
      font-size: 14px;
      color: #666;
      max-width: 300px;
      margin-left: 18px;
      display: inline-block;
      word-break: break-all;
      word-wrap: break-word;
      position: relative;
      &::before {
        content: '';
        position: absolute;
        top: -6px;
        left: -13px;
        width: 15px;
        height: 15px;
        border: 0 solid transparent;
        border-bottom-width: 12px;
        border-bottom-color: currentColor;
        border-radius: 0 0 0 15px;
        color: #e5e5e5;
      }
    }
  }
  .chat-input {
    textarea::-webkit-input-placeholder {
      color: #555;
    }
    .el-textarea__inner {
      background-color: hsla(0, 0%, 100%, 0);
      border: none;
      color: #2d0000;
      border-top: 1px solid #dcdfe6;
    }
  }
  .chat-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .playingLyric {
      padding-top: 4px;
      padding-left: 10px;
      font-size: 16px;
      color: #999;
      // background: linear-gradient(to right, red, blue);
      // background-clip: text;
      // color: transparent;
      text-transform: uppercase;
      color: line;
      font-weight: 600;
      font-family: Arial;
      line-height: 1.3;
      letter-spacing: 10px;
      color: #fff;
      // background: linear-gradient(45deg, #00a0e9, #10d39d, #00a0e9, #10d39d);
      // background: linear-gradient(to right, #acb6e5, #86fde8);
      // background: linear-gradient(45deg, #69eacb 0%, #eaccf8 48%, #6654f1 100%);
      // background: linear-gradient(-225deg, #231557 0%, #44107a 29%, #ff1361 67%, #fff800 100%);
      background: linear-gradient(45deg, #fff6b7, #f6416c);

      color: transparent;
      /*设置字体颜色透明*/
      background-clip: text;
      /*背景裁剪为文本形式*/
      animation: ran 20s linear infinite;
    }
    @keyframes ran {
      from {
        backgroud-position: 0 0;
      }
      to {
        background-position: 1000px 0;
      }
    }
    .enter {
      padding: 5px;
      text-align: right;
    }
  }
  .right {
    text-align: right;
    flex-direction: row-reverse;
    .msg {
      margin-right: 18px;
      text-align: left;
      &::before {
        display: none;
      }
      &::after {
        content: '';
        position: absolute;
        top: -6px;
        right: -13px;
        width: 15px;
        height: 15px;
        border: 0 solid transparent;
        border-bottom-width: 12px;
        border-bottom-color: currentColor;
        border-radius: 0 0 15px 0;
        color: #e5e5e5;
      }
    }
  }
}
</style>